import React, { useRef, useState } from 'react'
import { View, Text, StyleSheet, SafeAreaView, TouchableWithoutFeedback, Dimensions, Image, TouchableOpacity, Clipboard } from 'react-native'
import { connect } from 'react-redux'
import { IconOutline } from "@ant-design/icons-react-native";
import { pTx } from '../../utils/dimensions';
import { Toast } from '@ant-design/react-native'
import { exportPrivateKeyFromKeystore } from 'react-native-web3-wallet';
import { useRealm, useQuery } from '@realm/react'
import { schemaName } from "../../realm"
import ModalName from "../../components/modalName"
import VerifyPasswordModal from "../../components/verifyPasswordModal"

const WalletDetails = ({ navigation }) => {
    const realm = useRealm();
    const wallet = useQuery(schemaName.Wallet, wallet => {
        return wallet.filtered('current = true');
    })[0];
    const walletList = useQuery(schemaName.Wallet)
    const modalNameRef = useRef(null)
    const verifyPasswordModalRefs = useRef(null)
    const verifyPasswordModalRefs2 = useRef(null)
    const copyToClipboard = () => {
        Clipboard.setString(wallet.address)
        Toast.info('复制成功')
    }
    const sendExportMnemonic = async (password) => {
        try {
            const res = await exportPrivateKeyFromKeystore(wallet.keystore, password)
            verifyPasswordModalRefs.current.setModalVisible(false)
            navigation.navigate("exportPrivateKey", { privateKey: res })
        } catch (error) {
            Toast.info('密码错误')
        }
        verifyPasswordModalRefs.current.setLoading(false)
    }
    evokePassword = (bool) => {
        verifyPasswordModalRefs.current.show()
    }
    const deleteWallet = async (password) => {
        try {
            await exportPrivateKeyFromKeystore(wallet.keystore, password)
            realm.write(() => {
                realm.delete(wallet);
                for (const wallet of walletList) {
                    wallet.current = false
                }
                walletList[0].current = true
            });
            navigation.navigate('wallet')


        } catch (error) {
            Toast.info('密码错误')
        }
        verifyPasswordModalRefs2.current.setModalVisible(false)
        verifyPasswordModalRefs2.current?.setLoading(false)
    }

    return (
        <SafeAreaView style={styles.page}>
            <View style={styles.block}>
                <TouchableWithoutFeedback onPress={() => copyToClipboard()}>
                    <View style={styles.row}>
                        <View style={styles.cell}>
                            <Image style={styles.icon} source={require('../../assets/image/icon6.png')}></Image>
                            <View >
                                <Text style={styles.name}>钱包地址</Text>
                                <View style={styles.address}>
                                    <Text style={styles.txt}>{wallet.address}</Text>
                                    <IconOutline name="copy" style={styles.copy} />
                                </View>
                            </View>
                        </View>
                    </View>
                </TouchableWithoutFeedback>
            </View>
            <View style={styles.block}>
                <TouchableWithoutFeedback onPress={() => modalNameRef.current.show()}>
                    <View style={styles.row}>
                        <Text style={styles.label}>钱包名称</Text>
                        <View style={styles.rightRow}>
                            <Text style={styles.label}>{wallet.name}</Text>
                            <IconOutline name="right" style={styles.iconRight} />
                        </View>
                    </View>
                </TouchableWithoutFeedback>
            </View>
            <View style={styles.block}>
                {/* <TouchableWithoutFeedback onPress={() => evokePassword(true)}>
                    <View style={styles.row}>
                        <Text style={styles.label}>导出记组词</Text>
                        <IconOutline name="right" style={styles.iconRight} />
                    </View>
                </TouchableWithoutFeedback> */}
                <TouchableWithoutFeedback onPress={() => evokePassword(false)}>
                    <View style={styles.row}>
                        <Text style={styles.label}>导出私钥</Text>
                        <IconOutline name="right" style={styles.iconRight} />
                    </View>
                </TouchableWithoutFeedback>
            </View>
            <View style={[styles.block, styles.button]}>
                <TouchableOpacity onPress={() => verifyPasswordModalRefs2.current.show()}>
                    <View style={[styles.row, { justifyContent: "center" }]}>
                        <Text style={[styles.label, { color: "#DA0000" }]}>删除钱包</Text>
                    </View>
                </TouchableOpacity>
            </View>
            <ModalName ref={modalNameRef} />
            <VerifyPasswordModal ref={verifyPasswordModalRefs} sendExamine={sendExportMnemonic} />
            <VerifyPasswordModal ref={verifyPasswordModalRefs2} sendExamine={deleteWallet} />
        </SafeAreaView>
    )
}

const mapStateToProps = (state) => (state.wallet)

const mapDispatchToProps = {
}

export default connect(mapStateToProps, mapDispatchToProps)(WalletDetails)


const styles = StyleSheet.create({
    page: {
        position: "relative",
        flex: 1,
        paddingHorizontal: pTx(15),
        paddingVertical: pTx(15),
        backgroundColor: "#f3f4f5",
    },
    block: {
        marginBottom: pTx(10),
        backgroundColor: "#fff",
        borderRadius: pTx(6),
    },
    row: {
        paddingHorizontal: pTx(10),
        paddingVertical: pTx(15),
        flexDirection: 'row',
        justifyContent: "space-between",
        alignItems: "center",
        borderBottomWidth: 1,
        borderColor: "rgba(175, 181, 189, 0.15)"
    },
    cell: {
        maxWidth: Dimensions.get('screen').width - pTx(160),
        flexDirection: 'row',
        alignItems: "center",
    },
    icon: {
        marginRight: pTx(12),
        width: pTx(42),
        height: pTx(42),
    },

    name: {
        fontSize: pTx(16),
        color: "#AFB5BD"
    },
    rightRow: {
        flexDirection: 'row',
        justifyContent: "space-between",
        alignItems: "center",
    },
    address: {
        marginTop: pTx(2),
        flexDirection: 'row',
        alignItems: "center",
    },
    txt: {
        fontSize: pTx(16),
        color: "#0A0C14",
    },
    iconRight: {
        fontSize: pTx(16),
        color: "#B2B2B2FF"
    },
    copy: {
        marginLeft: pTx(16),
        fontSize: pTx(16),
        color: "#B2B2B2FF"
    },
    label: {
        fontSize: pTx(16),
        color: "#0A0C14",
    },
    button: {
        position: "absolute",
        bottom: pTx(40),
        left: pTx(20),
        right: pTx(20),
    }
})